<template>
  <div>
    <TableGridComponent ref="question-index-table" request-url="testManage/selectQstId.do"/>
    <div ref="question-info-div" class="question-info-div">
      <div class="level-div" ref="level-div"></div>
      <div class="question-select-flag" @click="selectQuestion($event)">选中</div>
      <div class="question-select-flag" @click="getLast($event)">上一题</div>
      <div class="question-select-flag" @click="getNext($event)">下一题</div>
      <div class="question-content" ref="question-content">
      </div>
      <div class="question-selection" v-for="(item, index) in selections" :key="index"
           :style="'color:'+((item.flag==='1')?'red':'black')">{{item.selectNode}}.&nbsp;&nbsp;{{item.selectContent}}</div>
      <div id="answer-div" ref="answer-div"></div>
    </div>
    <DictGroupComponent ref="dict-group">
      <DictDefineComponent dict-group="BM0801"/>
      <DictDefineComponent dict-group="BM0802"/>
    </DictGroupComponent>
  </div>
</template>

<script>
import TableGridComponent from "@/components/grid/TableGridComponent";
import {postRequest} from "@/axio2";
import DictGroupComponent from "@/components/dict/DictGroupComponent";
import DictDefineComponent from "@/components/dict/DictDefineComponent";

export default {
  name: "TestQuestionQueryMain",
  components: {DictDefineComponent, DictGroupComponent, TableGridComponent},
  data(){
    return{
      selections:[],
      currentNum:Number
    }
  },
  methods:{
    getQuestion(index,id){
      this.currentNum = index;
      postRequest(
          "testManage/selectQstById.do",
          {'id':id},
          this.successCallBack,
          null,
          this
      )
    },
    selectQuestion(event){
      let event1 = event.currentTarget;
      let event2 = event.target;
      if(event1===event2){
        // 首先执行推送
        let text = event.target.innerText;
      }
    },
    getFirst(){
      // 首先执行推送
      this.$refs["question-index-table"].getNextIndexData(-1);
    },
    getLast(event){
      let event1 = event.currentTarget;
      let event2 = event.target;
      if(event1===event2){
        // 首先执行推送
        this.$refs["question-index-table"].getLastIndexData(this.currentNum);
      }
    },
    getNext(event){
      let event1 = event.currentTarget;
      let event2 = event.target;
      if(event1===event2){
        // 首先执行推送
        this.$refs["question-index-table"].getNextIndexData(this.currentNum);
      }
    },
    successCallBack(resp, component){
      if(resp.data.resultData.length===1){
        let info = resp.data.resultData[0];
        component.$refs["question-content"].innerText = (info.id)+". （"+component.$refs["dict-group"].getDictGroup("BM0801")[info.type]+"）"+info.content;
        this.selections = info.selections;
        if(1===info.level){
          // 入职
          component.$refs["level-div"].style["color"] = "green";
        }else if(2===info.level){
          // 初级
          component.$refs["level-div"].style["color"] = "blue";
        }else if(3===info.level){
          // 中级
          component.$refs["level-div"].style["color"] = "#ff8800";
        }

        component.$refs["level-div"].innerText = "难度："+component.$refs["dict-group"].getDictGroup("BM0802")[info.level];
        component.$refs["question-info-div"].style.display = "block";
      }else{
        component.$refs["question-info-div"].style.display = "none";
        component.$refs["question-content"].innerText = "";
        this.selections = [];
      }
    }
  },
  beforeMount() {
    this.$on("selectTableGrid",this.getQuestion);
  },
  mounted() {
    this.getFirst();
  }
}
</script>

<style scoped>
.question-info-div{
  width: 80%;
  padding: 20px;
  border: 1px #dddddd solid;
  border-radius: 8px;
  display: none;
}
.question-content{
  padding-top: 20px;
  font-size: xx-large;
  font-weight: bold;
}
.question-selection{
  font-size: x-large;
  padding-top:15px;
}
.level-div{
  display: inline-block;
  font-size: xx-large;
  font-weight: bolder;
  padding-bottom: 5px;
  border-bottom: 1px solid black;
}
.question-select-flag{
  cursor: pointer;
  display: inline-block;
  padding: 10px 25px;
  margin-left: 50px;
  font-size: x-large;
  color: #888888;
  border: 1px solid #888888;
  border-radius: 4px;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
.question-select-flag:hover{
  cursor: pointer;
  display: inline-block;
  padding: 10px 25px;
  margin-left: 50px;
  font-size: x-large;
  color: #888888;
  border: 1px solid #888888;
  background: #bbffbb;
  border-radius: 4px;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
</style>